<template>
<view>
<view catchtouchmove="true" class="search_wrapper">
    <view @tap="startSearch" :class="'search_sec flex search_sec' + (searching?'_active':'')">
        <image src="/static/images/icon_search.png"></image>
        <input @focus="startSearch" @input="searchInput" :class="'input input' + (searching?'_active':'')" placeholder="请输入地区名" :value="searchWord">
        <view @tap="clearSearchWord" class="clear" v-if="searchWord!==''">
            <image src="/static/images/icon_clear.png"></image>
        </view>
    </view>
    <view @tap="endSearch" :class="'cancel cancel' + (searching?'_show':'')">取消</view>
</view>
<view class="result_wrapper" v-if="searchResult.length>0||searchNoData">
    <view class="result_list">
        <view v-for="(item, idx) in searchResult" :key="idx" @tap="setCity" class="result_item flex" :data-city-id="item.id" :data-city-name="item.name">
            <view class="city">{{item.name}}</view>
            <view class="province">{{item.province}}</view>
        </view>
    </view>
    <view class="nodata" v-if="searchNoData">
        <image mode="scaleToFill" src="/static/images/nodata.png"></image>
        <view>暂时未查找到该地区</view>
    </view>
</view>
<view class="dist_wrapper flex">
    <view class="left">
        <view v-for="(item, idx) in provinceList" :key="idx" @tap="changeProvince" :class="'pro_item pro_item' + (selectedProvince===idx?'_active':'')" :data-idx="idx">{{item.name}}</view>
    </view>
    <view class="right">
        <view class="position" :style="'height: ' + (gpsFlag?'152rpx':'220rpx')" v-if="selectedProvince===0">
            <view class="title">当前定位</view>
            <view class="gps flex">
                <image src="/static/images/icon_locate.png"></image>
                <view class="desc" v-if="!gpsFlag">未开启，去<text class="color">开启定位</text>
                </view>
                <view @tap="setCity" class="desc" data-type="locate" v-else>{{gpsCityName}}<text class="sub">GPS定位</text>
                </view>
            </view>
            <view class="tips" v-if="!gpsFlag">请开启您的手机定位，并在本小程序的设置中允许获取定位信息</view>
        </view>
        <view class="cate_wrapper" v-if="selectedProvince===0&&storageCities.length>0">
            <view class="title">最近访问</view>
            <view class="cate_sec flex">
                <view v-for="(item, idx) in storageCities" :key="idx" @tap="setCity" class="cate_item flex" :data-city-id="item.id" :data-city-level="item.level" :data-city-name="item.name">
                    <view>{{item.name}}</view>
                </view>
            </view>
        </view>
        <view class="cate_wrapper" v-if="selectedProvince===0">
            <view class="title">热门地区</view>
            <view class="cate_sec flex">
                <view v-for="(item, idx) in hotList" :key="idx" @tap="setCity" class="cate_item flex" :data-city-id="item.id" :data-city-name="item.name">
                    <view>{{item.name}}</view>
                </view>
            </view>
        </view>
        <view class="cate_wrapper" v-else>
            <view class="title">所有地区</view>
            <view class="cate_sec flex">
                <view v-for="(item, idx) in cityList" :key="idx" @tap="setCity" class="cate_item flex" :data-city-id="item.id" :data-city-name="item.name">
                    <view>{{item.name}}</view>
                </view>
            </view>
        </view>
    </view>
</view>
</view>
</template>

<script>
var t = require("../../utils/request.js"),
    a = require("../../utils/util.js"),
    e = function (t) {
  return t && t.__esModule ? t : {
    default: t
  };
}(require("../../utils/api.js")),
    app = getApp(),
    i = e.default.chinaHotArea;

export default {
  data() {
    return {
      searchFocus: !1,
      searching: !1,
      searchWord: "",
      searchNoData: !1,
      searchResult: [],
      provinceList: [],
      hotList: [],
      cityList: [],
      allCityList: [],
      selectedProvince: 0,
      gpsFlag: !1,
      gpsCityName: "",
      storageCities: []
    };
  },

  components: {},
  props: {},
  onLoad: function (t) {
    var a = this;

    try {
      var e = uni.getStorageSync("gpsFlag");
      "gps" === e ? this.setData({
        gpsFlag: !0,
        gpsCityName: app.globalData.gpsCityName
      }) : "none" === e && this.setData({
        gpsFlag: !1
      });
    } catch (t) {
      console.log(t);
    }

    this.getChinaHotArea(), uni.getStorage({
      key: "historyCities",
      success: function (t) {
        "getStorage:ok" === t.errMsg && t.data.length && a.setData({
          storageCities: t.data
        });
      }
    });
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {
    return {
      title: "让公益更生活 让生活更公益",
      path: "/pages/index/index",
      imageUrl: "/static/images/zyh_logo.jpg"
    };
  },
  methods: {
    startSearch: function (t) {
      console.log(t), this.setData({
        searching: !0,
        searchFocus: !0
      });
    },
    endSearch: function () {
      this.setData({
        searching: !1,
        searchFocus: !1,
        searchWord: "",
        searchResult: [],
        searchNoData: !1
      });
    },
    searchInput: function (t) {
      var a = this;
      this.setData({
        searchWord: t.detail.value
      }), "" !== t.detail.value ? setTimeout(function () {
        for (var e = [], s = a.allCityList, i = 0; i < s.length; i++) for (var r = 0; r < s[i].length; r++) if (s[i][r].name.indexOf(t.detail.value) > -1) {
          var n = {};
          n.id = s[i][r].id, n.name = s[i][r].name, n.province = a.provinceList[i + 1].name, e.push(n);
        }

        e.length > 0 ? a.setData({
          searchResult: e,
          searchNoData: !1
        }) : a.setData({
          searchNoData: !0
        });
      }, 800) : this.setData({
        searchResult: []
      });
    },
    clearSearchWord: function () {
      this.setData({
        searchWord: "",
        searchResult: []
      });
    },
    setCity: function (t) {
      var a = null;

      if ("locate" === t.currentTarget.dataset.type) {
        app.globalData.cityName = app.globalData.gpsCityName, app.globalData.cityId = app.globalData.gpsCityId;

        try {
          uni.setStorageSync("cityType", "gps");
        } catch (t) {
          console.log(t);
        }

        a = {
          id: app.globalData.gpsCityId,
          name: app.globalData.gpsCityName
        };
      } else {
        app.globalData.cityName = t.currentTarget.dataset.cityName, app.globalData.cityId = t.currentTarget.dataset.cityId;

        try {
          uni.setStorageSync("cityType", "selected");
        } catch (t) {
          console.log(t);
        }

        a = {
          id: t.currentTarget.dataset.cityId,
          name: t.currentTarget.dataset.cityName
        };
      }

      var e = this.storageCities;
      -1 === e.findIndex(function (t) {
        return t.id === a.id;
      }) && a.id !== app.globalData.gpsCityId && (3 === e.length && e.shift(), e.push(a), uni.setStorage({
        key: "historyCities",
        data: e,
        success: function () {}
      })), uni.reLaunch({
        url: "/pages/index/index"
      });
    },
    changeProvince: function (t) {
      var a = this.allCityList;
      this.setData({
        selectedProvince: t.currentTarget.dataset.idx,
        cityList: a[t.currentTarget.dataset.idx - 1]
      });
    },
    getChinaHotArea: function () {
      var e = this,
          s = {
        url: i
      };
      return (0, t.request)(s, "uncommon").then(function (t) {
        if (t.data.errCode === a.ERR_OK) {
          for (var s = t.data.data, i = [], r = [], n = [], o = 0; o < s.length && "其他" !== s[o].name; o++) {
            var c = {};
            "推荐" === s[o].name ? r = s[o].hotArea : n.push(s[o].allArea), c.name = s[o].shortname, i.push(c);
          }

          e.setData({
            provinceList: i,
            allCityList: n,
            hotList: r
          });
        }
      }).catch(function (t) {
        console.log(t);
      });
    }
  }
};
</script>
<style>
page {
    position: relative;
    height: 100%;
    padding-top: 100rpx;
}

.search_wrapper,page {
    width: 100%;
    background: #fff;
    overflow: hidden;
}

.search_wrapper {
    position: fixed;
    top: 0;/*  #ifdef  H5  */
    top: calc(88rpx + constant(safe-area-inset-top));
    top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
    left: 0;
    z-index: 9;
    height: 100rpx;
    padding: 14rpx 30rpx;
}

.search_sec {
    position: relative;
    flex: 0 0 690rpx;
    width: 690rpx;
    height: 72rpx;
    padding: 0 20rpx;
    background: #f0f0f0;
    border-radius: 36rpx;
    transition: all .33s ease;
}

.search_sec.search_sec_active {
    flex: 0 0 604rpx;
    width: 604rpx;
}

.search_wrapper .cancel {
    position: absolute;
    top: 14rpx;
    right: -56rpx;
    z-index: 3;
    width: 56rpx;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 28rpx;
    color: #333;
    transition: right .33s ease;
}

.search_wrapper .cancel.cancel_show {
    right: 30rpx;
}

.search_sec image {
    flex: 0 0 36rpx;
    height: 36rpx;
}

.search_sec .input {
    flex: 0 0 180rpx;
    width: 180rpx;
    height: 72rpx;
    line-height: 72rpx;
    padding-left: 12rpx;
    font-size: 28rpx;
    color: #333;
    transition: all .33s ease;
}

.search_sec .input.input_active {
    flex: 0 0 520rpx;
    width: 520rpx;
}

.search_sec .clear {
    position: absolute;
    top: 50%;
    right: 10rpx;
    z-index: 9;
    transform: translateY(-50%);
    width: 55rpx;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    font-size: 0;
    overflow: auto;
}

.search_sec .clear image {
    width: 36rpx;
    height: 36rpx;
    vertical-align: middle;
}

.result_wrapper {
    position: fixed;
    top: 100rpx;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background: #fff;
    border-top: 1rpx solid #e1e2e3;
    overflow: auto;
}

.result_list {
    width: 100%;
    height: auto;
    padding-left: 30rpx;
}

.result_list .result_item {
    width: 100%;
    height: 96rpx;
    justify-content: flex-start;
    line-height: 96rpx;
    border-bottom: 1rpx solid #e1e2e3;
}

.result_item .city {
    flex: none;
    margin-right: 8rpx;
    font-size: 32rpx;
    color: #333;
}

.result_item .province {
    flex: none;
    font-size: 28rpx;
    color: #999;
}

.nodata {
    width: 100%;
    height: auto;
    padding-top: 92rpx;
    text-align: center;
}

.nodata image {
    width: 202rpx;
    height: 190rpx;
    margin-bottom: 40rpx;
}

.nodata view {
    font-size: 32rpx;
    color: #333;
}

.dist_wrapper {
    position: fixed;
    top: 100rpx;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    justify-content: flex-start;
    overflow: hidden;
}

.dist_wrapper .left {
    flex: 0 0 144rpx;
    width: 144rpx;
    height: 100%;
    background: #f0f0f0;
    overflow-y: scroll;
}

.left .pro_item {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    color: #333;
}

.left .pro_item.pro_item_active {
    color: #1dbb9b;
    background: #fff;
}

.dist_wrapper .right {
    flex: auto;
    height: 100%;
    padding-left: 30rpx;
    overflow-y: scroll;
}

.position {
    width: 100%;
    border-bottom: 1rpx solid #e1e2e3;
    padding-top: 30rpx;
    margin-bottom: 20rpx;
}

.position .title {
    margin-bottom: 28rpx;
    font-size: 26rpx;
    color: #999;
}

.position .gps {
    justify-content: flex-start;
    line-height: 36rpx;
    margin-bottom: 18rpx;
}

.position .gps image {
    flex: 0 0 24rpx;
    width: 24rpx;
    height: 34rpx;
    margin-right: 12rpx;
}

.position .gps .desc {
    font-size: 36rpx;
    font-weight: 600;
}

.gps .desc .color {
    color: #24cba9;
}

.gps .desc .sub {
    display: inline-block;
    margin-left: 12rpx;
    vertical-align: bottom;
    font-size: 24rpx;
    font-weight: 400;
    color: #999;
}

.position .tips {
    padding-left: 36rpx;
    font-size: 24rpx;
    color: #999;
}

.cate_wrapper {
    width: 100%;
    height: auto;
    padding-top: 10rpx;
}

.cate_wrapper .title {
    margin-bottom: 30rpx;
    font-size: 26rpx;
    color: #999;
}

.cate_sec {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.cate_sec .cate_item {
    flex: 0 0 172rpx;
    width: 172rpx;
    height: 72rpx;
    border: 1rpx solid #e1e2e3;
    border-radius: 6rpx;
    margin-right: 16rpx;
    margin-bottom: 20rpx;
    padding: 0 6rpx;
}

.cate_sec .cate_item:nth-child(3n+3) {
    margin-right: 0;
}

.cate_item view {
    text-align: center;
    font-size: 26rpx;
}
</style>